<template>
	<view class="ikz-school">
		<ikz-loading :css-data="loading_css"></ikz-loading>
		<ikz-topbg></ikz-topbg>
		<view class="ikz-form-input-box ikz-afters" @click="getExpress()">
			<image class="ikz-form-input-img" src="/static/campus/takeaddr.png"></image>
			<view class="ikz-form-input">
				{{ point_info.title||'取货地点(必选)' }}
			</view>
		</view>
		<view class="ikz-form-input-box ikz-afters" @click="goaddress">
			<image class="ikz-form-input-img" src="/static/campus/giveaddr.png"></image>
			<view v-if="!address_default">收货地点(必选)</view>
			<view class="ikz-form-address" v-else>
				{{address_default.name}}-{{address_default.mobile}}
				<view class="ikz-form-address-detail">
					{{address_default.group_name}}-{{address_default.detail}}
				</view>
			</view>
		</view>
		<view class="ikz-form-input-box ikz-afters">
			<image class="ikz-form-input-img" src="/static/campus/time.png"></image>
			<view style="width: 80%;">
				<ikz-datetime @returnTime="returnTime"></ikz-datetime>
			</view>
		</view>
		<!-- 取快递 -->
		<view class="ikz-take" v-for="(item,index) in express_box" :key="index">
			<image class="ikz-take-img" src="/static/campus/box.png"></image>
			<view class="ikz-take-center">
				<view class="ikz-take-title">
					{{item.type}}：￥{{item.price}}
				</view>
				<view class="ikz-take-tips">
					{{item.desc}}
				</view>
			</view>
			<view class="ikz-take-right">
				<view style="width: 50rpx;height: 50rpx;">
					<image v-if="item.number" class="ikz-take-option" src="/static/campus/reduce.png"
						@click="reduceExpress(index)"></image>
				</view>
				<view class="ikz-take-num">{{item.number||''}}</view>
				<image class="ikz-take-option" src="/static/campus/add.png" @click="addExpress(index)"></image>
			</view>
		</view>
		<!-- 取快递 -->
		<!-- 其他信息 -->
		<view class="ikz-tips">
			<view class="ikz-tips-title">
				取件信息（必填）
			</view>
			<view class="ikz-tips-box">
				<textarea class="ikz-tips-text" v-model="form_data.information"
					placeholder="请备注姓名电话及粘贴取件短信（此信息仅接单员可见）"></textarea>
			</view>
		</view>
		<view class="ikz-take">
			<ikz-updata @returnFiles="returnFiles"></ikz-updata>
		</view>
		<!-- 其他信息 -->
		<view style="height:230rpx">

		</view>
		<view class="ikz-bottom">
			<view class="ikz-bottom-box">
				<view class="ikz-bottom-price">￥{{form_data.total_fee}}</view>
				<view class="ikz-bottom-btn" @click="setUp">立即提交</view>
			</view>
		</view>

	</view>
</template>

<script>
	import ikzLoading from '@/pages/Component/Public/Loading/loading.vue';
	import ikzTopbg from '@/pages/Component/Public/Topbg/public/topbg/topbg.vue';
	import ikzUpdata from '@/pages/Component/Public/Updata/public/updata/updata.vue';
	import ikzDatetime from '@/pages/Component/Public/Pickertime/public/datetime/index.vue';
	var app = getApp();
	import ikz from '@/pages/Common/tools.js';
	export default {
		components: {
			ikzLoading,
			ikzTopbg,
			ikzUpdata,
			ikzDatetime
		},
		data() {
			return {
				address_default: '',
				loading_css: {
					display: 'flex',
				},
				form_data: {
					type: 1,
					start: '',
					destination: '',
					hope_arrive: '',
					information: '',
					run_fee: '',
					remarks: '',
					reward: '',
					total_fee: 0,
					annex_information_images: [],
				},
				point_info: '',
				express_box: [],
				files: [],
			}
		},
		onLoad(options) {
			this.expressBox((res) => {
				this.loading_css.display = 'none';
			});
		},
		onShow() {
			this.address_default = app.globalData.user_address.address_default || '';
			this.form_data.destination = this.address_default.id;
			this.point_info = app.globalData.point_info || '';
			this.form_data.start = this.point_info.id || ''
			this.$forceUpdate();
		},
		created() {
			// var that = this;
		},
		methods: {
			//增加数据
			addExpress(index) {
				this.express_box[index].number++;
				this.form_data.total_fee = (parseFloat(this.express_box[index].price) + parseFloat(this.form_data
					.total_fee)).toFixed(2)
			},
			reduceExpress(index) {
				this.express_box[index].number--;
				this.form_data.total_fee = (parseFloat(this.form_data.total_fee) - parseFloat(this.express_box[index]
					.price)).toFixed(2)
			},
			//返回图片数据
			returnFiles(e) {
				this.files = e;
			},
			//请求包裹数据
			expressBox(fn) {
				var path = '/xyb/same/express_config';
				var data = {}
				ikz.post(path, data, (res) => {
					if (res.data.code) {
						this.express_box = res.data.data.express_config;
						for (var i = 0; i < this.express_box.length; i++) {
							this.express_box[i].number = 0;
						}
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
					fn();
				});
			},
			//提交数据
			setUp() {
				uni.showLoading({
					title: '加载中'
				})
				//判断填写数据是否正确
				if (this.form_data.start == '') {
					wx.showToast({
						title: '请输入取货地点',
						icon: 'error',
						duration: 2000
					})
					return
				}
				if (this.form_data.destination == '') {
					wx.showToast({
						title: '请选择收货地点',
						icon: 'error',
						duration: 2000
					})
					return
				}
				if (this.form_data.hope_arrive == '') {
					wx.showToast({
						title: '请选择送达时间',
						icon: 'error',
						duration: 2000
					})
					return
				}
				if (this.form_data.information == '') {
					wx.showToast({
						title: '请输入取件信息',
						icon: 'error',
						duration: 2000
					})
					return
				}
				if (this.files.length) {
					//循环上传图片
					this.upImg(0, (res) => {
						uni.hideLoading();
						var path = '/pages/Component/Module/Campus/Program/Order/index/index'
						ikz.nav(path, 'ln', this.form_data);
					});
				} else {
					uni.hideLoading();
					var path = '/pages/Component/Module/Campus/Program/Order/index/index'
					ikz.nav(path, 'ln', this.form_data);
				}
			},
			upImg(index, fn) {
				uni.showLoading({
					title: '加载中'
				})
				var that = this;
				var path = "/common/upload";
				var data = {}
				ikz.up(path, data, 'file', this.files[index], (res) => {
					var temp_result_data = JSON.parse(res.data);
					if (temp_result_data.code) {
						uni.hideLoading();
						that.form_data.annex_information_images.push(temp_result_data.data.url);
						if (that.files.length == (index + 1)) {
							fn();
						} else {
							index++
							that.upImg(index, fn)
						}
					} else {
						uni.showModal({
							title: '提示',
							content: temp_result_data.msg,
							showCancel: false,
							success: function(res) {}
						});
						uni.hideLoading();
					}
				})
			},
			//返回时间
			returnTime(e) {
				this.form_data.hope_arrive = e
			},
			check: function(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || ''
				//重新赋值给input
				this.$nextTick(() => {
					this.form_data.run_fee = e.target.value
				})
			},
			checkPrice() {
				console.log(this.form_data.run_fee)
				this.form_data.run_fee = parseFloat(this.form_data.run_fee).toFixed(2);
			},
			//我的地址
			goaddress() {
				uni.navigateTo({
					url: '/pages/Component/Module/Address/Program/myAddress/index'
				})
			},
			//快递点地址
			getExpress() {
				uni.navigateTo({
					url: '/pages/Component/Module/Campus/Program/Express/point/index'
				})
			},
		}
	};
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background: #F3F3F3;
	}

	.ikz-top-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: -1;
	}

	.ikz-school {
		width: 100%;
		height: 100%;
	}

	/* 输入 */
	.ikz-form-input-box {
		box-sizing: border-box;
		padding: 30rpx;
		width: 95%;
		margin: 30rpx auto 0;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 15rpx;
	}

	.ikz-form-input {
		width: 85%;
	}

	.ikz-form-input-img {
		width: 50rpx;
		height: 50rpx;
		margin-right: 10rpx;
	}

	.ikz-form-address {
		font-size: 28rpx;
	}

	.ikz-form-address-detail {
		color: #828282;
	}

	/* 输入 */
	/* 输入 */

	/* 快递 */
	.ikz-take {
		box-sizing: border-box;
		padding: 30rpx;
		width: 95%;
		margin: 30rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		border-radius: 15rpx;
	}

	.ikz-take-img {
		width: 80rpx;
		height: 80rpx;
	}

	.ikz-take-title {
		font-size: 30rpx;
	}

	.ikz-take-center {
		width: 50%;
		line-height: 50rpx;
	}

	.ikz-take-tips {
		color: #888888;
		font-size: 28rpx;
	}

	.ikz-take-option {
		width: 50rpx;
		height: 50rpx;
	}

	.ikz-take-right {
		width: 25%;
		display: flex;
		align-items: center;
	}

	.ikz-take-num {
		width: 40%;
		text-align: center;
	}

	/* 快递 */
	/* 其他 */
	.ikz-tips {
		box-sizing: border-box;
		padding: 30rpx;
		width: 95%;
		margin: 30rpx auto 0;
		background: #fff;
		border-radius: 15rpx;
	}

	.ikz-tips-box {
		margin-top: 20rpx;
		width: 100%;
		height: 200rpx;
	}

	.ikz-tips-text {
		box-sizing: border-box;
		padding: 10rpx;
		width: 100%;
		height: 200rpx;
		border: 1px solid #CCCCCC;
		border-radius: 15rpx;
		font-size: 28rpx;

	}

	/* 其他 */
	/* 底部 */
	.ikz-bottom {
		position: fixed;
		bottom: 0px;
		left: 0px;
		display: flex;
		align-items: center;
		width: 100%;
		height: 150rpx;
		background: #F3F3F3;
	}

	.ikz-bottom-box {
		width: 95%;
		height: 100rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #555555;
		border-bottom-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
	}

	.ikz-bottom-price {
		margin-left: 50rpx;
		color: #fff;
		font-weight: 800;

	}

	.ikz-bottom-btn {
		box-sizing: border-box;
		padding: 0px 40rpx;
		height: 100rpx;
		line-height: 100rpx;
		color: #fff;
		border-bottom-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
		background: linear-gradient(to right, #FBAB7E, #F8C66D);
	}

	/* 底部 */
	.ikz-afters {
		position: relative;
	}

	.ikz-afters:after {
		content: " ";
		display: inline-block;
		height: 6px;
		width: 6px;
		border-width: 2px 2px 0 0;
		border-color: #888;
		border-style: solid;
		-webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
		transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
		top: -2px;
		position: absolute;
		top: 50%;
		margin-top: -4px;
		right: 20px;
	}
</style>
